<template>
  <div class="shopping">
    <div class="main">
      <!-- 页面标题 -->
      <div class="header">
        <span>商城</span>
        <div class="icon">
          <van-icon name="search" size="21" />
          <van-icon name="envelop-o" size="21" />
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="img">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="/icon-shopping/lunbo1.jpg" alt="">
          </van-swipe-item>
          <van-swipe-item>
            <img src="/icon-shopping/lunbo2.jpg" alt="">
          </van-swipe-item>
          <van-swipe-item>
            <img src="/icon-shopping/lunbo3.jpg" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 导航栏 -->
      <div class="nav">
        <van-grid :column-num="5" :border="false">
          <van-grid-item class="item">
            <img src="/icon-shopping/car.png" alt="">
            <span>保养套餐</span>
          </van-grid-item>
          <van-grid-item class="item">
            <img src="/icon-shopping/xinqiu.png" alt="">
            <span>DiLink</span>
          </van-grid-item>
          <van-grid-item class="item">
            <img src="/icon-shopping/shouhou.png" alt="">
            <span>售后服务</span>
          </van-grid-item>
          <van-grid-item class="item">
            <img src="/icon-shopping/jingping.png" alt="">
            <span>品牌精品</span>
          </van-grid-item>
          <van-grid-item class="item">
            <img src="/icon-shopping/shopping.png" alt="">
            <span>积分商城</span>
          </van-grid-item>
        </van-grid>
      </div>
      <!-- 好物推荐 -->
      <div class="goods">
        <van-nav-bar left-text="好物推荐" :border="false">
          <template #right>
            <van-icon name="arrow" size="18" />
          </template>
        </van-nav-bar>
        <div class="tuijian">
          <div class="left">
            <div class="txd-box">
              <span>分科联名剃须刀</span>
              <div class="icon">
                <van-icon name="points" size="4" />
                <span>3780</span>
              </div>
              <div class="go">
                <span>GO</span>
                <van-icon name="arrow" size="4" />
              </div>
            </div>
            <div class="txd">
              <img src="/icon-shopping/txd.png" alt="">
            </div>
          </div>
          <div class="right">
            <div class="right-top">
              <div class="car-box">
                <span>唐 DM-i仿真车模</span>
                <div class="icon">
                  <van-icon name="points" size="4" />
                  <span>3780</span>
                </div>
                <div class="go">
                  <span>GO</span>
                  <van-icon name="arrow" size="4" />
                </div>
              </div>
              <div class="car">
                <img src="/icon-shopping/rcar.jpg" alt="">
              </div>
            </div>
            <div class="right-bottom">
              <div class="cup-box">
                <span>王朝马克杯</span>
                <div class="icon">
                  <van-icon name="points" size="4" />
                  <span>3780</span>
                </div>
                <div class="go">
                  <span>GO</span>
                  <van-icon name="arrow" size="4" />
                </div>
              </div>
              <div class="cup">
                <img src="/icon-shopping/cup.jpg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 人气推荐 -->
      <div class="hot">
        <van-nav-bar left-text="人气推荐" :border="false">
          <template #right>
            <van-icon name="arrow" size="18" />
          </template>
        </van-nav-bar>
        <div class="shoppinglist">
          <van-grid :column-num="2" :border="false">
            <van-grid-item>
              <img src="/shopping/1.jpg" alt="">
              <span>丹拿音响</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/2.jpg" alt="">
              <span>FSD减震器</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/3.jpg" alt="">
              <span>护板组合套装</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/4.jpg" alt="">
              <span>车身改色膜</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/5.jpg" alt="">
              <span>精诚保养套餐-秦系列</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/6.jpg" alt="">
              <span>精诚保养套餐-唐系列</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/7.jpg" alt="">
              <span>精诚保养套餐-汉系列</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/8.jpg" alt="">
              <span>精诚保养套餐-宋系列</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/9.jpg" alt="">
              <span>精诚延保-唐系列</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/10.jpg" alt="">
              <span>精诚延保-秦系列</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/11.jpg" alt="">
              <span>精诚延保-汉系列</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/12.jpg" alt="">
              <span>精诚延保-宋系列</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/13.jpg" alt="">
              <span>精诚保养计划-秦系列</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/14.jpg" alt="">
              <span>精诚保养计划-宋系列</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/15.jpg" alt="">
              <span>精诚保养计划-唐系列</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
            <van-grid-item>
              <img src="/shopping/16.jpg" alt="">
              <span>精诚保养计划-汉系列</span>
              <span class="pirce">￥9404.00</span>
            </van-grid-item>
          </van-grid>
          <div style="height:50px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


export default {
  data() {
    return {

    };
  },
};
</script>

<style lang="scss" scoped src="../assets/css/shopping.scss">
</style>
